<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			*{ margin: 0; padding: 0; list-style: none;}
			.clearfix:after{ content: ""; clear: both; display: block;}
			li{width: 100px;height: 30px;text-align: center;line-height: 30px;border: 1px solid red;float: left;}
			p{width: 300px;height: 300px;background: red;text-align: center;font-size: 50px;line-height: 300px;display: none;}
			.active{background: yellow;}
			.show{display: block;}
		</style>
		<script>
			function tabFn(str){
				this.oPar=document.querySelector(str)
				this.aBtn=this.oPar.querySelectorAll("li")
				this.list=this.oPar.querySelectorAll("p")
				var _this=this;
				for(var i=0; i<this.aBtn.length;i++){
					this.aBtn[i].index=i;
					this.aBtn[i].onclick=function(){
						_this.change(this.index);
					}
				}
			}
			tabFn.prototype.change=function(n){
				for(var i=0; i<this.aBtn.length;i++){
					this.aBtn[i].className='';
					this.list[i].className='';
				}
					this.list[n].className='show';
					this.aBtn[n].className='active';
			}
		</script>
	</head>
	<body>
		<div class="tab" id="tab1">
			<ul class="clearfix">
				<li class="active">1</li>
				<li>2</li>
				<li>3</li>
			</ul>
			<p class="show">1</p>
			<p>2</p>
			<p>3</p>
		</div>
		
		<div class="tab" id="tab2">
			<ul class="clearfix">
				<li class="active">1</li>
				<li>2</li>
				<li>3</li>
			</ul>
			<p class="show">1</p>
			<p>2</p>
			<p>3</p>
		</div>
	</body>
	<script>
		var tab1=new tabFn('#tab1')
		var tab2=new tabFn('#tab2')
	</script>
</html>
